<template name="appBody">
    <!-- Custom Node Modal -->
    {{>customNode}}

    <!-- Main Menu -->
    <div class="ui visible left vertical inverted sidebar labeled icon menu">
        <a href="/" class="item logoArea">
        <img class="main-menu-logo" src="/img/qrl-logo-white.png" />
        QRL
      </a>
        <a id="newWalletButton" href="/create" class="item main-menu-btn {{menuNewWalletActive}}">
        <img class="icon svg" src="/img/icons/new-wallet.svg" />
        New Wallet
      </a>
        <a id="openWalletButton" href="/open" class="item main-menu-btn {{menuOpenWalletActive}}" style="{{walletStatus.menuHiddenInverse}}">
        <img class="icon svg" src="/img/icons/open-wallet.svg" />
        Open Wallet
      </a>
        <a id="closeWalletButton" href="/close" class="item main-menu-btn" style="{{walletStatus.menuHidden}}">
        <img class="icon svg" src="/img/icons/lock.svg" />
        Close Wallet
      </a>

        <a id="sendAndReceiveButton" href="/transfer" class="item main-menu-btn {{menuTransferActive}}" style="{{walletStatus.menuHidden}}">
        <img class="icon svg" src="/img/icons/transfer.svg" />
        Send &amp;<br />Receive
      </a>

        <a id="toolsButton" href="/tools" class="item main-menu-btn {{menuToolsActive}}" style="{{walletStatus.menuHidden}}">
        <i class="wrench icon"></i>
        Tools
      </a>

        <a href="/verify" class="item main-menu-btn {{menuVerifyActive}}">
        <img class="icon svg" src="/img/icons/tick.svg" />
        Verify<br />Transaction
      </a>

        <a href="{{nodeExplorerUrl}}" target="_blank" class="item main-menu-btn">
        <i class="search icon"></i>
        Explorer
      </a>

        <a class="item main-menu-btn sidebarConnectionStatus">
        <i class="{{connectionStatus.colour}} signal icon"></i>
      </a>
    </div>


    <!-- Content Wrapper -->
    <div class="main-content-wrapper">
        <!-- Top Message Bar -->
        <div class="main-content-warning ui fixed secondary menu">
            <div class="center menu">
                <div class="ui item">
                    <a href="https://medium.com/the-quantum-resistant-ledger/last-week-in-qrl-may-21st-27th-fa8fb1017e02#1150"><div class="ui icon tiny message">
                  <i class="help icon"></i>
                  <div class="content">
                    <div class="header">
                      Problems using a Ledger Nano device?
                    </div>
                    <p>Read our blog for info and help &raquo;</p>
                  </div>
                </div></a>
                </div>
                <div class="ui item">
                    <a href="https://medium.com/the-quantum-resistant-ledger/warning-fake-qrl-wallet-in-microsoft-store-a96f8318af1f">
                  <div class="ui icon red tiny message">
                    <i class="warning small icon"></i>
                    <div class="content">
                      <div class="header">
                        Beware of fake apps
                      </div>
                      <p>Fake QRL app on Microsoft Store &raquo;</p>
                    </div>
                  </div>
              </a>
                </div>
              </div>
                <div class="right menu">
                    <div class="ui item">
                        <i class="close icon"></i>
                    </div>
                </div>
            </div>
        <!-- Main Content Area -->
        <div class="main-content">

            <!-- Web Assembly Warning -->
            <div class="small ui modal" id="webassemblyWarning">
                <div class="header">Your browser is not supported!</div>
                <div class="content">
                    <div class="ui warning icon message">
                        <i class="warning icon"></i>
                        <div class="content">
                            <p>Your browser does not support Web Assembly which is a core component in the QRL Wallet.</p>
                            <p>It is recommended that you use the latest version of Google Chrome or Mozilla Firefox to access the QRL Wallet.</p>
                            <p><a href="https://www.mozilla.org/" target="_blank">Download Mozilla Firefox</a></p>
                            <p><a href="https://www.google.com/chrome/" target="_blank">Download Google Chrome</a></p>
                        </div>
                    </div>
                </div>
                <div class="actions">
                    <div class="ui approve button green">Okay</div>
                </div>
            </div>

            <!-- Temporarily disable Address Format Selection so it doesn't disturb other goings-on
        <div class="ui toggle checkbox floatleft">
          <input type="checkbox" id="addressFormatCheckbox" name="addressFormatCheckbox" {{ addressFormatChecked }} ><label for="addressFormatCheckbox"><strong>Address Format</strong> {{ addressFormat }} </label>
        </div>
        -->

            <!-- Top Right Network Selection -->
            <div class="ui selection dropdown floatright" id="networkDropdown">
                <input id="network" type="hidden" value="{{nodeId}}">
                <i class="dropdown icon"></i>
                <div class="text"></div>
                <div class="menu">
                    {{#each defaultNetworks}}
                        <div class="{{this.disabled}} item" data-value="{{this.id}}">{{this.name}}</div>
                    {{/each}}
                    {{#if customNodeCreated}}
                        <div class="item" data-value="custom">{{customNodeName}}</div>
                    {{/if}}
                    <div class="item" data-value="add">Add/Edit Custom Node</div>
                </div>
            </div>

            <!-- Page Content -->
            <div class="subPageContent">
              {{#if walletStatus.unlocked}}
              <h3 class="ui header pageHeader">
                <div id="openWalletAddress" class="content wordBreak">
                  {{walletStatus.address}}
                </div>
                <div class="ui two column grid">
                  <div class="column">
                    {{#if inProgress}}<div class="ui active inline mini loader"></div>{{/if}}
                    <small>{{balanceAmount}} {{balanceSymbol}}</small>
                  </div>
                  <div class="column">
                    {{#if inProgress}}<div class="ui active inline mini loader"></div>{{/if}}
                    <small>{{otsKeysRemaining}} OTS keys remaining</small>
                  </div>
                </div>
              </h3>
              {{/if}}
                <div class="ui container">

                    {{> Template.dynamic template=main}}

                    <!-- Footer -->
                    <div class="footer">
                        <div class="ui center aligned container">
                            <a href="/">
                  <img class="footerLogo" src="/img/Q@2x.png">
                </a>
                            <br />
                            <div class="ui horizontal small divided link list">
                                <a class="item" target="_blank" href="http://theqrl.org/">theQRL.org</a>
                                <a class="item" target="_blank" href="http://theqrl.org/whitepaper/QRL_whitepaper.pdf">White Paper</a>
                                <a class="item" target="_blank" href="https://github.com/theQRL">Github</a>
                                <a class="item" target="_blank" href="https://github.com/theQRL/qrl-wallet/issues">Found a Problem?</a>
                                <a class="item" target="_blank" href="https://github.com/theQRL/qrl-wallet">qrl-wallet v{{qrlWalletVersion}}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>




</template>
